<template>
  <div class="login">
    <div class="login_left relative">
      <img class="login_img" :src="login_img" />
      <div class="absolute inset-0 flex items-center justify-center flex-col">
        <div class="">
          <div class="text-3xl">WELCOME</div>
          <div class="text-2xl mt-2">欢迎使用高频工具</div>
          <div class="text-xl mt-8 flex items-center">
            <el-icon><Aim /></el-icon>
            <span class="ml-2">高效</span>
          </div>
          <div class="text-xl mt-2 flex items-center">
            <el-icon><Aim /></el-icon>
            <span class="ml-2">便捷</span>
          </div>
          <div class="text-xl mt-2 flex items-center">
            <el-icon><Aim /></el-icon>
            <span class="ml-2">省心</span>
          </div>
        </div>
      </div>
    </div>
    <div class="login_right flex justify-center items-center">
      <div class="p-10 bg-white rounded-xl" style="min-width: 50%">
        <div class="text-center font-bold text-gray-700 text-2xl">用户登录</div>
        <div class="flex flex-col mt-6">
          <el-form
            :model="loginInfo"
            label-position="top"
            :rules="rules"
            class="w-full"
            ref="ruleFormRef"
          >
            <el-form-item label="账号" prop="user" class="w-full">
              <el-input
                v-model="loginInfo.user"
                size="large"
                autocomplete="off"
                placeholder="请输入账号"
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" class="w-full">
              <el-input
                v-model="loginInfo.password"
                size="large"
                type="password"
                autocomplete="off"
                placeholder="请输入密码"
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm()"
                size="large"
                class="mt-6 w-full"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import login_img from "@renderer/assets/auth_banner.jpg";
import type { FormInstance, FormRules } from "element-plus";
import { login } from "@renderer/https/api/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useStoreTemplate } from "@renderer/store/modules/template";
const router = useRouter();
const storeTemplate = useStoreTemplate();

const loginInfo = ref({
  user: "ycj",
  password: "123456",
});
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules<{}>>({
  user: [{ required: true, message: "请输入账号", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "change" }],
});

const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      login(loginInfo.value)
        .then((res) => {
          storeTemplate.$state.token = res.data.token;
          storeTemplate.$state.userInfo = res.data.userInfo;
          ElMessage.success("登录成功");
          router.push("/");
        })
        .catch((err) => {
          ElMessage.error(err.msg);
        });
      // 登录
    } else {
      return false;
    }
  });
};
</script>
<style scoped lang="scss">
.login {
  display: flex;
  width: 100%;
  height: 100%;
  .login_left {
    width: 35%;
    color: #fff;
    .login_img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .login_right {
    width: 65%;
  }
}

::v-deep(.el-form-item__label),
::v-deep(.el-input__inner) {
  color: #040d21 !important;
  font-weight: 600;
  opacity: 0.8;
}
</style>
